<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				font-family: "微软雅黑";
			}
			.tree{
				list-style: none;
				padding: 0;
				margin: 0;
				background-color:lightgrey;
				border:1px solid darkgray;
				width: 400px;
				padding-left:5px;
			}
			.tree img{
				width: 10px;
				cursor: pointer;
			}
			.tree_sub{
				list-style: none;
				padding: 0;
				margin: 0;
				padding-left: 25px;
			}
			.tree_item_title{
				cursor: pointer;
			}
			.tree_item_title:hover{
				color:red;
			}
			.tree_item{
				cursor:pointer;
			}
			.tree_item:hover{
				color:red;
			}
		</style>	
	</head>

	<body>
		<ul class="tree">
			<li>
				<span class="tree_item_title">软件开发</span>
				<ul class="tree_sub">
					<li>
						<span class="tree_item_title">编程语言</span>
						<ul class="tree_sub">
							<li class="tree_item">Java</li>
							<li class="tree_item">C#</li>
							<li class="tree_item">C++</li>
						</ul>
					</li>
					<li>
						<span class="tree_item_title">数据库</span>
						<ul class="tree_sub">
							<li class="tree_item">SQL Server</li>
							<li class="tree_item">Oracle</li>
							<li class="tree_item">MySQL</li>
						</ul>
					</li>
					<li>
						<span class="tree_item_title">Web前端</span>
						<ul class="tree_sub">
							<li class="tree_item">HTML 5</li>
							<li class="tree_item">JavaScript</li>
							<li class="tree_item">AngularJS</li>
						</ul>
					</li>
				</ul>
			</li>
			<li>
				<span class="tree_item_title">网络与系统</span>
				<ul class="tree_sub">
					<li>
						<span class="tree_item_title">操作系统</span>
						<ul class="tree_sub">
							<li class="tree_item">Windows</li>
							<li class="tree_item">MacOS</li>
							<li class="tree_item">Linux</li>
							<li class="tree_item">Unix</li>
						</ul>
					</li>
					<li>
						<span class="tree_item_title">服务器软件</span>
						<ul class="tree_sub">
							<li class="tree_item">防火墙</li>
							<li class="tree_item">Web Server</li>
							<li class="tree_item">Email Server</li>
						</ul>
					</li>
				</ul>
			</li>
			<li>
				<span class="tree_item_title">云计算与大数据</span>
			</li>
		</ul>
		<script>
			var titles = document.getElementsByClassName("tree_item_title");
			for(var i=0;i<titles.length;i++){
				var title = titles[i];
				
				var img = document.createElement("img");
				img.src = 'img/minus.png';
				title.parentElement.insertBefore(img, title);
				
				img.addEventListener("click", function(){
					var img = window.event.target;
					var treeSub = img.nextElementSibling.nextElementSibling;
					treeSub.style.display = (treeSub.style.display == "none") ? "block" : "none";
					img.src = (treeSub.style.display == "none") ? "img/plus.png" : "img/minus.png";
				});
			}
		</script>
	</body>

</html>